<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>


</head>

<body>
    <script>
        var table = document.createElement('table');
        table.border = '1px';
        var tr = document.createElement('tr');
        var td = document.createElement('td');
        td.innerHTML = '这是表格';
        tr.appendChild(td);
        table.appendChild(tr);
        document.body.appendChild(table);

        //工厂方法
        function cTag(tag) {
            return document.createElement(tag)
        }
        var table2 = cTag('table');
        table2.border = '1px';
        var tr2 = cTag('tr');
        var td2 = cTag('td');
        td2.innerHTML = '这是表格二';
        tr2.appendChild(td2);
        table2.appendChild(tr2);
        document.body.appendChild(table2);

        function CreatTag(tag) {
            this.DOM = document.createElement(tag);

            this.border = function (bor) {
                this.DOM.border = bor;
            },
                this.addChild = function (child) {
                    this.DOM.appendChild(child);
                },
                this.text = function (text) {
                    this.DOM.innerText = text;
                }
            this.styles = function (sty) {
                for (var k in sty) {
                    this.DOM.style[k] = sty[k];
                }
            }
        }

        //创建对象
        var table3 = new CreatTag('table');
        table3.border('1px');
        var tr3 = new CreatTag('tr');
        var td3 = new CreatTag('td');
        td3.text('表格三');

        tr3.addChild(td3.DOM);
        table.appendChild(tr3.DOM);
        document.body.appendChild(table3.DOM);

        var div = new CreatTag('div');
        div.text('这是一个div');
        div.styles({
            width: '100px',
            height: '200px',
            backgroundColor: 'skyblue'
        })
        document.body.appendChild(div.DOM);


        // 创建的 对象 实现 p标签的创建和设置过程
        var p = new CreatTag('p');
        p.text('这是段落内容');
        p.styles({
            width: '300px',
            height: '100px',
            backgroundColor: 'pink'
        });

        document.body.appendChild(p.DOM);


    </script>
</body>

</html>